import ROBOT_AVATAR from '@/assets/image/avatar_robo.png';
import { nanoid } from 'nanoid';
import React, { useEffect, useState } from 'react';

const Demo: React.FC<any> = (props: any) => {
  const { data } = props;
  const [list, setList] = useState([]);

  useEffect(() => {
    const { blue_tags, key_points, red_tags } = data;
    //匹配tag的颜色
    key_points.forEach((item: any) => {
      item.key = nanoid();
      if (blue_tags.includes(item.title)) {
        item.color = 'blue';
      }
      if (red_tags.includes(item.title)) {
        item.color = 'red';
      }
    });
    setList(key_points);
  }, [data]);
  return (
    <>
      {props.type === 'demo1' ? (
        <div className="commandList">
          <div className="commandList-hd">
            <img className="avatar" src={ROBOT_AVATAR} height={42} width={40} />
          </div>
          <div className="commandList-bd" style={{ flex: 1 }}>
            <div className="demoTitle" style={{ margin: '5px 0 0px 5px' }}>
              段落样式填写示例
            </div>
            <div className="paragraphDemoBox">
              {list.length > 0 &&
                list.map((item, index) => {
                  // 在title比content长的情况下，用isLong用来补从字数占位 所以透明
                  const difference = item.title.length - item.content.length + 1;
                  const isLong =
                    difference > 0 ? <span>&nbsp;{Array(difference).fill('\u00A0')}</span> : '';
                  return (
                    <span key={index} className={`paragraphDemoList ${item.color}Border`}>
                      {item.content}
                      <span style={{ opacity: '0' }}>{isLong}</span>
                      <span className={`tag ${item.color}Tag`}>{item.title}</span> &nbsp;
                    </span>
                  );
                })}
            </div>
          </div>
        </div>
      ) : (
        <div className="commandList">
          <div className="commandList-hd">
            <img className="avatar" src={ROBOT_AVATAR} height={42} width={40} />
          </div>
          <div className="commandList-bd" style={{ flex: 1 }}>
            <div className="demoTitle">表单样式填写示例</div>
            <div className="genConBox">
              {list.length > 0 &&
                list.map((item, index) => {
                  return (
                    <div className="genCon" key={index}>
                      <span className={`tag ${item.color}Tag`}>{item.title}:</span>
                      {item.content}
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
      )}
    </>
  );
};
export default Demo;
